<template>
    <div class="app-container">
        <el-table v-loading="loading" :data="shopList">
            <el-table-column label="商家名称" align="center" prop="shopname" />
            <el-table-column label="商家负责人" align="center" prop="shopuser" />
            <el-table-column label="联系方式" align="center" prop="shoptel" />
            <el-table-column label="入驻时间" align="center" prop="createtime">
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.createtime, '{YY}-{MM}-{DD}') }}</span>
                </template>
            </el-table-column>
            <el-table-column label="地址" align="center" prop="shopaddress" />
            <el-table-column label="退回原因" align="center" prop="msg">
                <template slot-scope="scope">
                    <span v-if="scope.row.msg == ''">{{ '暂无' }}</span>
                    <span v-else>{{ scope.row.msg }}</span>
                </template>
            </el-table-column>
            <el-table-column label="跟进记录" align="center">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-edit" @click="chakan(scope.row)">查看</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 跟进记录详情 -->
        <el-dialog :visible.sync="open" width="800px" height="300px" append-to-body>
            <el-table :data="genjinList">
                <el-table-column label="跟进内容" align="center" prop="typeid">
                    <template slot-scope="scope">
                        <span v-if="scope.row.typeid == 0">待领取</span>
                        <span v-if="scope.row.typeid == 1">已领取</span>
                        <span v-if="scope.row.typeid == 2">活动锁单</span>
                        <span v-if="scope.row.typeid == 3">订单成交</span>
                        <span v-if="scope.row.typeid == 4">转让客资</span>
                        <span v-if="scope.row.typeid == 5">放弃客资</span>
                        <span v-if="scope.row.typeid == 6">取消订单申请</span>
                        <span v-if="scope.row.typeid == 8">取消订单成功</span>
                        <span v-if="scope.row.typeid == 9">取消订单失败</span>
                        <span v-if="scope.row.typeid == 10">退回客资申请</span>
                        <span v-if="scope.row.typeid == 11">退回客资成功</span>
                        <span v-if="scope.row.typeid == 12">退回客资失败</span>
                    </template>
                </el-table-column>
                <el-table-column label="跟进时间" align="center" prop="changetime">
                    <template slot-scope="scope">
                        <span>{{ parseTime(scope.row.changetime, '{YY}-{MM}-{DD} {hh}:{mm}:{ss}') }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="凭证或图片" align="center" prop="img">
                    <template slot-scope="scope">
                        <div v-for="(item, index) in scope.row.img">
                            <span v-if="scope.row.img == ''">{{ '暂无' }}</span>
                            <el-image v-else :key="index" :src="item" alt="" weight="20" :preview-src-list="srcList" @click="click(scope.row)"
                                style="width:40px;"></el-image>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="备注" align="center" prop="msg">
                    <template slot-scope="scope">
                        <span v-if="scope.row.msg == ''">{{ '暂无' }}</span>
                        <span v-else>{{ scope.row.msg }}</span>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>
<script>
import { selectKZTHshop, selectgenjinjilu } from "@/api/kuser/kuserback.js";
export default {
    data() {
        return {
            genjinList: [],
            shopList: [],
            // 遮罩层
            loading: true,
            open: false,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
            },
            date: {
                kzId: this.$route.query.kzId,
                shopid: this.$route.query.shopid
            },
            srcList: [],
        }
    },
    created() {
        this.getList();
    },
    methods: {
        async getList() {
            let res = await selectKZTHshop(this.date);
            if (res.code == 200) {
                this.shopList.push(res.data.data);
                this.loading = false;
            }
        },
        // 查看跟进记录
        chakan() {
            this.open = true;
            selectgenjinjilu(this.date).then(response => {
                response.data.data.forEach(item => {
                    item.img = item.img.split(',')
                })
                this.genjinList = response.data.data;
            })
        },
        click(row){
            this.srcList=row.img;
        }
    }
}
</script>